<template>
  <div class="register-list" v-if="show">
    <el-table
      ref="singleTableRef"
      header-cell-class-name="heardClassName"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      height="200px"
      @current-change="handleCurrentChange"
    >
      <el-table-column property="patientName" label="患者" width="100" />
      <el-table-column property="patientGender" label="性别" width="80">
        <template #default="{ row }">
          {{
            row.patientGender == 1
              ? '男'
              : row.patientGender == 2
              ? '女'
              : '未知'
          }}
        </template>
      </el-table-column>
      <el-table-column property="name" label="年龄" width="100">
        <template #default="{ row }">
          {{ row.ageYear }}年{{ row.ageMonth }}月
        </template>
      </el-table-column>
      <el-table-column property="patientPhone" label="电话" width="" />
      <el-table-column property="idCard" label="身份证号" width="200" />
      <el-table-column property="lastVisitDate" label="上次就诊" width="" />
    </el-table>
  </div>
</template>
<script setup lang="ts">
import type { AnyColumn } from 'element-plus/es/components/table-v2/src/common.mjs';
const emit = defineEmits(['select']);

const tableData = ref<any>([]);
const currentRow = ref<any>(null);
const show = ref<boolean>(false);
const handleCurrentChange = (val: any) => {
  currentRow.value = val;
  emit('select', currentRow.value);
  show.value = false;
};
defineExpose<{
  open: (row: AnyColumn) => void;
  close: () => void;
}>({
  open: async (row: any) => {
    tableData.value = row;
    show.value = true;
  },
  close: () => {
    show.value = false;
  },
});
</script>
<style lang="scss" scoped>
.register-list {
  position: fixed;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e6e6e6;
  padding: 0 0 8px 0;
  width: 800px;
  z-index: 999;
  overflow: auto;
}
::v-deep(.heardClassName) {
  background-color: #f5f7fa !important; /* 浅蓝色背景 */
  cursor: pointer;
}
</style>
